import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link , NavLink } from "react-router-dom";
import logo from './logo.svg';
import './App.css';

// 定义变量
const Index = () => <h2>Index</h2> ;
const About = () => <h2>About</h2> ;
const Users = () => <h2>Users</h2> ;
const Topics = ({match}) => (
    <div>
        <h2>Topics</h2>

        <ul>
            <li>
                <Link to={`${match.url}/components`}>Components</Link>
            </li>
            <li>
                <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
            </li>
        </ul>

        <Route path={`${match.path}/:id`} component={Topics} />
        <Route
            exact
            path={match.path}
            reander={() => <h3>Please select a topic.</h3>}
           />
    </div>
) ;


// 跳转路径
const AppRouter = () => (
<Router>
    <div>

        <ul>
            <li>
                <NavLink activeClassName="active" to="/myindex/">首页</NavLink>
            </li>
            <li>
                <NavLink activeClassName="active" to="/news/12345">新闻</NavLink>
            </li>
            <li>
                <NavLink activeClassName="active" to="/others/">其它</NavLink>
            </li>
        </ul>

        <Route path="/myindex" exact component={Index} />
        <Route path="/news/:id" component={Topics} />
        <Route path="/others/" component={Users} / >

        <br/>

        <nav>
            <ul>
                <li>
                    <Link to="/">Index</Link>
                </li>
                <li>
                    <Link to="/about/">About</Link>
                </li>
                <li>
                    <Link to="/users/">Users</Link>
                </li>
                <li>
                    <Link to="/topics/">Topics</Link>
                </li>
                <li>
                    <NavLink to="/react" activeClassName="hurray">
                          React
                      </NavLink>
                </li>
            </ul>
        </nav>

        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} / >
        <Route path="/topics/" component={Topics} / >

    </div>
</Router>
) ;


export default AppRouter ;
